<!-- This file is to creat the various side navigation for the one goal vs two goal game template. -->
<!-- Step 1 has no aside -->
<!-- Step 2 aside has only the tutorial -->
<aside id="step2">
		<div id="instructions">
			<h3>Tutorial</h3>
				<p>Instructions:</p>
				<ol>
					<li>Click only green circles</li>
					<li>Play until you miss</li>
				</ol>
		</div>		
</aside>
<!-- Step 3 aside is the same as step 2 except it says Play it -->
<aside id="step3">
		<div id="instructions">
			<h3>Play It</h3>
				<p>Instructions:</p>
				<ol>
					<li>Click only green circles</li>
					<li>Play until you miss</li>
				</ol>
		</div>		
</aside>
<!-- Step 4 aside captures the goal and keeps score there are 5 versions of Step 4-->
<!-- No goals, computer given one goal, computer given 2 goals, user genreated one goal, user genreated two goals-->
<aside id="step4_nogoals">
		<div id="instructions">
			<h3>Play It</h3>
				<p>Instructions:</p>
				<ol>
					<li>Click only green circles</li>
					<li>Play until you miss</li>
				</ol>
		<!-- closes instructions div-->		
		</div>			
</aside>
<aside id="step4_cgonegoal">
		<div id="instructions">
			<h3>Play It</h3>
				<p>Instructions:</p>
				<ol>
					<li>Click only green circles</li>
					<li>Play until you miss</li>
				</ol>
		<!-- closes instructions div-->		
		<div id="displaygoals">
			<p>Current Goal:</p>
				<ul>
					<li>Goal</li>
				</ul>
		<!-- closes goals div-->		
		</div>				
</aside>
<aside id="step4_cgtwogoals">
		<div id="instructions">
			<h3>Play It</h3>
				<p>Instructions:</p>
				<ol>
					<li>Click only green circles</li>
					<li>Play until you miss</li>
				</ol>
		<!-- closes instructions div-->		
		</div>
		<div id="displaygoals">
			<p>Current Goals:</p>
				<ol>
					<li>Goal 1</li>
					<li>Goal 2</li>
				</ol>
		<!-- closes goals div-->		
		</div>				
</aside>
<aside id="step4_ugonegoal">
		<div id="instructions">
			<h3>Play It</h3>
				<p>Instructions:</p>
				<ol>
					<li>Click only green circles</li>
					<li>Play until you miss</li>
				</ol>
		<!-- closes instructions div-->		
		</div>
		<div id="setgoals">
				<ul>
					<li id="goal1"><label><strong>Set A Goal:</strong></label><input type="text" id="goal1"/></li>
				</ul>
		<!-- closes goals div-->		
		</div>
		<div id="displaygoals">
			<p>Current Goal:</p>
				<ul>
					<li>Goal 1</li>
				</ul>
		<!-- closes goals div-->		
		</div>				
</aside>
<aside id="step4_ugtwogoals">
		<div id="instructions">
			<h3>Play It</h3>
				<p>Instructions:</p>
				<ol>
					<li>Click only green circles</li>
					<li>Play until you miss</li>
				</ol>
		<!-- closes instructions div-->		
		</div>
		<div id="setgoals">
				<ul>
					<li id="goal1"><label><strong>Set A Goal:</strong></label><input type="text" id="goal1"/></li>
					<li id="goal2"><label><strong>Set A Higher Goal:</strong></label><input type="text" id="goal2"/></li>
				</ul>
		<!-- closes goals div-->		
		</div>
		<div id="displaygoals">
			<p>Current Goal(s):</p>
				<ol>
					<li>Goal 1</li>
					<li>Goal 2</li>
				</ol>
		<!-- closes goals div-->		
		</div>				
</aside>

<!-- Step 5 has no aside -->